<template>
	<div class='login'>
		<el-form
			class="container"
			ref="loginFormRef"
			:model="loginForm"
			:rules="RULE_LOGIN"
			label-width="80px"
			@keyup.native.enter="onclickLogin(loginFormRef)"
		>
			<img
				class="center logo"
				:src="LOGO"
			>

			<el-form-item
				label="手机号"
				prop="phone"
			>
				<el-input
					v-model="loginForm.phone"
					size="large"
				/>
			</el-form-item>
			<el-form-item
				label="验证码"
				prop="code"
			>
				<div class="code">
					<el-input v-model="loginForm.code" />
					<el-button
						size="large"
						:disabled="!storeGetState('sendCode', 'canSend')"
						:loading="sendLoading"
						@click="onclickSendCode(loginFormRef)"
					>
						{{storeGetter('getCodeText')}}
					</el-button>
				</div>
			</el-form-item>
			<el-button
				class="login-btn"
				type="primary"
				size="large"
				:loading="submitLoading"
				@click="onclickLogin(loginFormRef)"
			>
				登录
			</el-button>
		</el-form>
	</div>
</template>

<script lang="ts">
export default {
  route: {
    meta: {
      needLogin: false
    }
  }
}
</script>

<script setup lang="ts">
import { ref } from 'vue'
import { sendCode, phoneLogin } from '@/api/user'
import { RULE_LOGIN } from '@/constants/rules'
import { storeGetState, storeGetter, storeCommit } from '@/utils/store'
import type { FormInstance } from 'element-plus'
import { $success, $pushTo, $hideLoading } from '@/utils/functions'
import { LOGO } from '@/constants'
import { unlLoginPage } from '@/utils/buffer'

/* 有时其他页面触发了加载动画，未关闭就跳转到登录页 */
$hideLoading()

/* 定义一个ref，表单中ref值要同名 */
const loginFormRef = ref<any>(null)
const loginForm = ref({
  phone: '',
  code: ''
})
const sendLoading = ref(false)
const submitLoading = ref(false)

/**
 * 点击发送验证码，校验手机号后触发发送，并进入倒计时
 */
const onclickSendCode = (formEl:FormInstance) => {
  formEl.validateField('phone', async(valid) => {
    if (!valid) {
      return
    }
    try {
      sendLoading.value = true
      await sendCode({
        phone: loginForm.value.phone,
        type: 'login'
      })
      storeCommit('startSend')
      $success('验证码已发送, 请注意查收')
    } catch (err) {
      console.log(err)
    }
    sendLoading.value = false
  })
}

/**
 * 点击登录
 */
const onclickLogin = async(formEl:FormInstance) => {
  formEl.validate(async(valid) => {
    if (valid) {
      try {
        submitLoading.value = true
        const res = await phoneLogin({
          ...loginForm.value,
          avatarUrl: LOGO,
          nickname: 'Aha小萌新',
        })

        storeCommit('loginSuccess', {
          userInfo: res.data.personalUserInfo,
          token: res.data.token,
        })
        $success('登录成功')
        /* 跳转主页 */
        $pushTo(unlLoginPage.name, unlLoginPage.query, unlLoginPage.params)
      } catch (err) { err }
      submitLoading.value = false
    }
  })
}

</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  background-color: #ffffff;

  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    padding: 20px;
    background-color: #ffffff;
    border-radius: $radiusMiddle;
    box-shadow: $shadow1;
    transform: translate(-50%, -50%);

    .logo {
      display: block;
      width: 100px;
      margin-bottom: 10px;
    }

    .el-form-item {
      width: 340px;
      margin-bottom: 30px;

      .code {
        display: flex;

        .el-input {
          margin-right: 10px;
        }

        .el-button {
          min-width: 125px;
        }
      }
    }

    .login-btn {
      width: 100%;
    }
  }
}
</style>
